import React from 'react';
import style from './style.kudos.styl';
import {Tooltip} from '../../ui-components';

import cx from 'classnames';

class KudoItem extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'KudoItem';
  }
  handleClick = () => {
    this.props.onClick && this.props.onClick(this.props.item);
  }
  render() {
    const {
      item,
      active
    } = this.props;
    const tip = `${item.medalName}：${item.description}`;
    return (
      <div className={cx({
        [style['item']]: true,
        [style['active']]: active,
      })} onClick={this.handleClick}>
        <Tooltip tip={tip} arrow={'top'} className={style['tip']}>
          <img src={item.medalIcon} />
        </Tooltip>
      </div>
    );
  }
}

export default KudoItem;
